<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               :before-open="beforeOpen"
               v-model="form"
               :data="data">
      <template #processList-form="{}">
        <avue-crud :option="processListOption"
                   :data="form.processList"></avue-crud>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script >
import {addProduct, delProduct, listProduct, updateProduct} from "/@/api/base/product";
import {reactive, ref, toRefs} from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import {listProductCateSelect} from "../../api/base/productCate";
import {listProcessInfo, processInfoFindById} from "../../api/base/processInfo";
import {getCraftProcessById, getCraftProcessInfo, listCraftProcess} from "../../api/base/craftProcess";
export default {
  name: "product",

  setup(props){
    const { proxy } = useCurrentInstance();
    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      index: false,
      viewBtn: false,
      selection: true,
      addBtn:true,
      searchLabelWidth:100,
      excelBtn:false,
      labelWidth:100,
      column: [


        {
          label: '商品编码',
          prop: "encode",
          model: 'input',
          minWidth: 150,
          order:9,
          search:true
        },

        {
          label: 'ERP编码',
          prop: "erpEncode", display:false,
          model: 'input', minWidth: 150,
        },

        {
          label: '商品名称',
          prop: "name", order:7,
          model: 'input', minWidth: 150,search:true
        },

        {
          label: '商品类型', order:8,
          prop: "productCateId", type: 'select',
          model: 'input', minWidth: 150,search:true,
          dataType: "number",
          dicData:()=>{return  listProductCateSelect().then(res=>{return res.data;})}
        },

        {
          label: '规格型号',
          prop: "specification", order:6,
          model: 'input', minWidth: 150,search:true
        },

        {
          label: '单位',
          prop: "unit", order:5,
          model: 'input', minWidth: 150,
        },

        {
          label: '单双面', order:3,
          prop: "oddOrEven", type: 'select',row:true,
          dataType: "number",
          dicData:[
            {label:'单面',value:1},
            {label:'双面',value:2},
          ],
          model: 'input', minWidth: 150,
        },
        {
          label: '工艺路线',
          prop: "craftId", order:2,
          type: 'table', minWidth: 150,search:true,
          children: {
            border: true, searchMenuSpan: 6,
            column: [
              {
                label: '工艺编码',
                prop: "encode", minWidth: 150, search: true
              },
              {
                label: '工艺名称',
                prop: "name", minWidth: 150, search: true
              },

              {
                label: '备注',
                prop: "remark", minWidth: 150,
              },
            ],

          },
          formatter: (row) => {
            if (!row.name) return '';
            return row.name;
          },
          onLoad: ({page, value, data}, callback) => {
            console.log({page, value, data},"onLoad")
            if (value) {
              let id = value;
              if (Array.isArray(value) && value.length > 0) {
                id = value[0];
              }
              getCraftProcessById( id).then(res => {
                callback(res.data);
              })

              return;
            }
            listCraftProcess(Object.assign({page: page.currentPage, limit: page.pageSize,}, data))
                .then(res => {
                  const resData = res.data;
                  callback({
                    total: resData.total,
                    data: resData.list,
                  })
                })

          },
          props: {
            label: 'name',
            value: 'id'
          },
          control:(a)=>{
            if (a ){
              getCraftProcessById(a).then(res => {
                form.value.craftName = res.data.name;
                form.value.craftCode = res.data.encode;
              })
              getCraftProcessInfo(form.value.craftId).then(res => {
                form.value.processList = res.data || [];
              });
            }
          }
        },
        {
          label: '工艺编码', hide:true,
          prop: "craftCode", order:1, disabled:true,
          model: 'input', minWidth: 150,search:true,
        },
        {
          label: '工序明细', order:1,
          prop: 'processList',
          span:24,hide: true
        },
        {
          label: '备注', order:0,
          prop: 'remark',
          span:24,hide: true,
          type:'textarea',
        },

        {
          label: '状态',
          prop: "status",
          type: 'radio', order:4,
          dataType: "number",
          dicData:[
            {label:'启用',value:1},
            {label:'停用',value:0},
          ],
          value: 1,
          model: 'radio', minWidth: 150,
        },

        {
          label: '录入人',
          prop: "createUserName", display:false,
          model: 'input', minWidth: 150,
        },

        {
          label: '录入/更新时间',
          prop: "updateTime", minWidth: 200,
          format: 'YYYY-MM-DD HH:mm:ss',
          type: 'date', display: false,
          search:true,searchRange:true,
          searchLabelWidth: 120,
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
        },
      ]
    });

    const processListOption = ref({
      menu: false,
      border:true,
      header:false,
      height: 245,
      align: 'center',
      column: [
        {
          label: '序号',
          prop: "sort",
          minWidth: 150,
        },
        {
          label: '工序名称',
          prop: "name",   minWidth: 150,
        },
        {
          label: '工序性质',
          prop: "quality",   minWidth: 150,
        }
     ]
    })
    const loading = ref(true);
    const data = ref([]);
    const crud = ref();
    const selectionList = ref([]);
    const queryParams = ref({});
    const form = ref({processList:[]});
    const page = ref({
      pageSize: 10,
      currentPage: 1,
      total: 0

    })
    const onLoad = (pages, params = {}) => {
      loading.value = true;
      listProduct(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list;
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const rowSave = (row, done, loading) => {
      addProduct(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowUpdate = (row, index, done, loading) => {
      updateProduct(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowDel = (row) => {
      proxy.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return delProduct(row);
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }

    const beforeOpen = (done, type) => {
      if (["edit", "view"].includes(type)) {
        getCraftProcessInfo(form.value.craftId).then(res => {
          form.value.processList = res.data || [];
          done();
        });
      }else{
        done();
      }

    }
    return {
      option,
      loading,
      processListOption,
      data,
      page,
      form,
      queryParams,
      onLoad,
      rowSave,
      rowUpdate,
      rowDel,
      refreshChange,
      searchChange,
      beforeOpen
    }
  }
}
</script>
